<%@ page contentType="text/html;charset=utf-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>便民服务平台3.0</title>
    <link rel="stylesheet" href="<c:url value='/resource/css/bootstrap.css'/>">
    <link rel="stylesheet" href="<c:url value='/resource/css/darktooltip.css'/>">
    <link rel="stylesheet" href="<c:url value='/resource/css/animate.min.css'/>">
    <link rel="stylesheet" href="<c:url value='/resource/css/style.css'/>">


</head>

<body>
<jsp:include page="../include/header.jsp"></jsp:include>
<script src="<c:url value='/resource/js/lib/template.js'/>"></script>
<script src="<c:url value='/resource/js/lib/jqPaginator.js?v2.1'/>"></script>
<style type="text/css">
    .td_middle {
        vertical-align: middle !important;
    }
</style>

<div class="main-container">
    <div class="mc-hd">
        <p class="app-t">queryCenter</p>
        <h1 class="app-h1">专注高端”互联网+政务”设计</h1>
        <div class="type-wrap">
            <h2 class="typedH2">慧眼看世界，在政务服务的路上不断追求创新！</h2>
        </div>
    </div>
    <div class="mc-bd">

        <div class="container">

            <ol class="breadcrumb">
                <li><a href="<c:url value="/"></c:url>">首页</a></li>
                <li class="active">预约中心</li>
            </ol>
            <div class="row">
                <div class="col-sm-12">
                    <div class="mccc-right">
                        <h2>预约列表</h2>


                        <div class="appointment-hd">
                            <div class="selector-addr-wrap">
                                <div class="selector-addr-line">
                                    <div class="sl-hd">地市公安：</div>
                                    <div class="sl-bd">
                                        <ul>
                                            <li><a href="#">南京</a></li>
                                            <li><a href="#">无锡</a></li>
                                            <li class="active"><a href="#">苏州</a></li>
                                            <li><a href="#">镇江</a></li>
                                            <li><a href="#">南通</a></li>
                                            <li><a href="#">扬州</a></li>
                                            <li><a href="#">盐城</a></li>
                                            <li><a href="#">徐州</a></li>
                                            <li><a href="#">淮安</a></li>
                                            <li><a href="#">连云港</a></li>
                                            <li><a href="#">常州</a></li>
                                            <li><a href="#">泰州</a></li>
                                            <li><a href="#">宿迁</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="selector-addr-line">
                                    <div class="sl-hd">区（县）局：</div>
                                    <div class="sl-bd">
                                        <ul>
                                            <li><a href="#">常熟</a></li>
                                            <li><a href="#">张家港</a></li>
                                            <li><a href="#">太仓</a></li>
                                            <li><a href="#">相城区</a></li>
                                            <li><a href="#">金阊区</a></li>
                                            <li class="active"><a href="#">虎丘区</a></li>
                                            <li><a href="#">平江区</a></li>
                                            <li><a href="#">沧浪区</a></li>
                                            <li><a href="#">工业园区</a></li>
                                            <li><a href="#">高新区</a></li>
                                            <li><a href="#">吴江区</a></li>
                                            <li><a href="#">吴中区</a></li>
                                            <li><a href="#">昆山市</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="appointment-bd">
                            <div class="filter-addr-wrap" id="temp_html_dept">

                                <script id="temp_data_dept" type="text/html">
                                    {{if list.length < 1}}
                                    {{/if}}
                                    {{each list as value i}}
                                    <div class="filter-addr-line">
                                        <div class="fl-hd">
                                            <span><img src="<c:url value="/resource/images/helpImg/org01.jpg"></c:url>"></span>
                                        </div>
                                        <div class="fl-bd">
                                            <h3>{{value.DEPT_NAME}}</h3>
                                            <p class="fl-bd-addr"><i></i>{{value.ADDRESS}}</p>
                                            <p class="fl-bd-phone"><i></i>{{value.ORGPHONE}}</p>
                                            <p class="fl-bd-time"><i></i>{{value.WORKTIME}}</p>
                                            <input type="hidden" id="hid_{{value.GUID}}" value="{{value.GUID}}"/>
                                        </div>
                                        <div class="fl-ft">
                                            <div class="btn-box">
                                                {{if value.MAT_ID == null}}
                                                <button class="btn btn-green" onclick="loadTimeDetail('{{value.GUID}}');">预约</button>
                                                {{/if}}
                                                {{if value.MAT_ID != null}}
                                                <button class="btn btn-green" onclick="loadYYDetail('{{value.GUID}}');">预约</button>
                                                {{/if}}
                                            </div>
                                        </div>
                                    </div>
                                    {{/each}}
                                </script>
                            </div>
                        </div>
                        <div class="text-center">
                            <ul class="pagination " id="pagination_dept"></ul>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>

<!-- 弹出层 start -->
<div class="modal fade" id="myModal-yylist">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">预约时间</h4>
            </div>
            <div class="modal-body" id="temp_html_yy">
                <div class="myAppoint-date-box">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>时间段</th>
                            <th><p>11-09</p><p><strong>今天</strong></p></th>
                            <th><p>11-09</p><p><strong>周六</strong></p></th>
                            <th><p>11-09</p><p><strong>周日</strong></p></th>
                            <th><p>11-09</p><p><strong>周一</strong></p></th>
                            <th><p>11-09</p><p><strong>周二</strong></p></th>
                            <th><p>11-09</p><p><strong>周三</strong></p></th>
                            <th><p>11-09</p><p><strong>周四</strong></p></th>
                            <th><p>11-09</p><p><strong>周五</strong></p></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <th>09：00-09：30</th>
                            <td class="active">已选(9)</td>
                            <td>可选(10)</td>
                            <td>可选(10)</td>
                            <td>可选(10)</td>
                            <td>可选(10)</td>
                            <td>可选(10)</td>
                            <td>可选(10)</td>
                            <td>可选(10)</td>
                        </tr>
                        <tr>
                            <th>09：00-09：30</th>
                            <td>可选(10)</td>
                            <td>可选(10)</td>
                            <td>可选(10)</td>
                            <td>可选(10)</td>
                            <td>可选(10)</td>
                            <td>可选(10)</td>
                            <td>可选(10)</td>
                            <td>可选(10)</td>
                        </tr>
                        <tr>
                            <th>09：00-09：30</th>
                            <td>可选(10)</td>
                            <td>可选(10)</td>
                            <td>可选(10)</td>
                            <td>可选(10)</td>
                            <td>可选(10)</td>
                            <td>可选(10)</td>
                            <td>可选(10)</td>
                            <td>可选(10)</td>
                        </tr>
                        <tr>
                            <th>09：00-09：30</th>
                            <td>可选(10)</td>
                            <td>可选(10)</td>
                            <td>可选(10)</td>
                            <td>可选(10)</td>
                            <td>可选(10)</td>
                            <td>可选(10)</td>
                            <td>可选(10)</td>
                            <td>可选(10)</td>
                        </tr>
                        </tbody>
                    </table>
                    <p>温馨提示：请在指定的预约时间前往办理，过期作废！</p>
                    <div class="btn-box">
                        <button class="btn btn-red">确定</button>
                        <button class="btn btn-default" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 弹出层 end -->
<jsp:include page="../include/footer.jsp"/>
<script src="<c:url value='/resource/js/require.js'/>" data-main="<c:url value='/resource/js/main.js'/>"
        id="current-page" current-page="order"></script>

<script src="<c:url value='/resource/js/app/laydate/laydate.js'/>"></script>
<script type="text/javascript">


    $(document).ready(function () {
        //延迟500毫秒加载，以确保jqPaginator加载完成
        setTimeout(loadData, 500);
    });


    function loadData(){
        //console.log($('#txtLostName').val());
        var searchJson = {
            ps: 20,
            pi: 1,
            addid: $('#txtLostName').val(),
            deptid: $('#txtOrgName').val()
        };
        new PagingData({
            type: 'GET',
            data: searchJson,
            url: '<c:url value="/order/page"></c:url>',
            tempId: "temp_data_dept",
            paginger: "pagination_dept",
            containerId: "temp_html_dept",
            errorCallback: function (e) {
                console.log(e);
            }
        }).getPagList();
    }

    var PagingData = function (option) {
        var myoption = option || {};

        this.getPagList = function () {
            var myurl = myoption.url;
            $.ajax({
                type: myoption.type,
                url: myurl,
                data: myoption.data,
                dataType: "json",
                success: function (resp) {
                    resp = eval(resp);
                    console.log(resp);
                    var shtml = template(myoption.tempId, resp.data);

                    $("#" + myoption.containerId).html(shtml);
                    paginator(resp.data);
                },
                error: function (resp) {

                    if (typeof (option.errorCallback) == "function") {
                        option.errorCallback(resp);
                    }
                }
            });
        }

        //设置分页条数据（私有方法）
        function paginator(resdata) {

            var _trow = resdata.totalRow == 0 ? 1 : resdata.totalRow;

            $.jqPaginator('#' + myoption.paginger, {
                totalCounts: _trow,
                pageSize: resdata.pageSize,
                visiblePages: 10,
                currentPage: resdata.pageIndex,
                first: '<li class="first"><a href="javascript:;">首页</a></li>',
                prev: '<li class="prev"><a href="javascript:;">上一页</a></li>',
                next: '<li class="next"><a href="javascript:;">下一页</a></li>',
                last: '<li class="last"><a href="javascript:;">尾页</a></li>',
//                selectpage: '{{page}}',
                page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
                onPageChange: function (num, type) {
                    if (type == "change") {
                        var custom = option;
                        // console.log(custom);
                        custom.data.pi = num;

                        new Paging(custom).getPagList();
                    }
                }
            });
        }
    }


    function loadYYDetail(id) {
        console.log("预约事项");
        $('#myModal-yylist').modal();
        <%--$.ajax({--%>
            <%--type: 'get',--%>
            <%--url: "<c:url value="/interacts/lostproperty/"></c:url>" + id,--%>
            <%--success: function (resp) {--%>
                <%--console.log(resp);--%>
                <%--resp = eval(resp);--%>
                <%--var shtml = template("lostproperty_template_detail", resp.data);--%>
                <%--//console.log(shtml);--%>
                <%--$("#modal-body-container").html(shtml);--%>
                <%--$('#myModal-lost').modal();--%>
            <%--},--%>
            <%--error: function (resp) {--%>

                <%--if (typeof (option.errorCallback) == "function") {--%>
                    <%--option.errorCallback(resp);--%>
                <%--}--%>
            <%--}--%>
        <%--});--%>


    }

    function loadTimeDetail(){
        console.log("预约日期");
    }
</script>
</body>
</html>
